import { useTable } from '@/hooks/useTable';
import {
  FooterToolbar,
  PageContainer,
  ProTable,
} from '@ant-design/pro-components';
import { useRef } from 'react';
import styles from './index.less';
const TableList = (props) => {
  /* 组件传递过来的数据 */
  const {
    columns,
    extraEl,
    headerTitle,
    headerOpt,
    searchOpt,
    centerRightSlot,
    requestFn,
    FooterToolbarEl,
  } = props;
  const tableRef = useRef();
  const { rowSelect, _rowSelection, _getData, pagination } =
    useTable(requestFn);

  return (
    <PageContainer header={headerOpt} className={styles.mTable}>
      <ProTable
        headerTitle={headerTitle}
        actionRef={tableRef}
        rowKey="id"
        search={searchOpt || {}}
        /* toolBarRender is  a function */
        toolBarRender={() => centerRightSlot}
        request={_getData}
        columns={columns}
        pagination={pagination}
        rowSelection={{
          onChange: _rowSelection,
        }}
      />
      {rowSelect?.length > 0 && (
        <FooterToolbar extra={extraEl(rowSelect)}>
          {FooterToolbarEl(rowSelect)}
        </FooterToolbar>
      )}
    </PageContainer>
  );
};

export default TableList;
